<div class="main-container">
  <nz-tabset class="publish-tab"
             [(nzSelectedIndex)]="publishType"
             (nzSelectedIndexChange)="getData()"
             [nzTabBarExtraContent]="extraTemplate">
    <nz-tab nzTitle="短信发布">
      <ng-template nz-tab>
        <div class="publish-main-container">
          <div class="row-card-container">
            <nz-card style="width: 100%;" nzTitle="黄河水情（单位：m³/s）">
              <form nz-form [formGroup]="yellowRiverForm" class="single-row">
                <div class="sms-card-col">
                  <p>
                    <label nz-checkbox [(ngModel)]="lyxChecked" [ngModelOptions]="{standalone: true}">龙羊峡水库</label>
                  </p>
                  <nz-form-item nzFlex>
                    <nz-form-label>早8时入库</nz-form-label>
                    <nz-form-control>
                      <input formControlName="lyx_early_8" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="sms-card-col">
                  <p>
                    <label nz-checkbox [(ngModel)]="ljxChecked" [ngModelOptions]="{standalone: true}">刘家峡水库</label>
                  </p>
                  <nz-form-item nzFlex>
                    <nz-form-label>早8时出库</nz-form-label>
                    <nz-form-control>
                      <input formControlName="ljx_early_8" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="sms-card-col">
                  <p>
                    <label nz-checkbox [(ngModel)]="xhyChecked" [ngModelOptions]="{standalone: true}">下河沿断面</label>
                  </p>
                  <nz-form-item nzFlex>
                    <nz-form-label>早8时</nz-form-label>
                    <nz-form-control>
                      <input formControlName="xhydm_early_8" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item nzFlex>
                    <nz-form-label>昨日均</nz-form-label>
                    <nz-form-control>
                      <input formControlName="xhydm_last_avg" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="sms-card-col">
                  <p>
                    <label nz-checkbox [(ngModel)]="qtxChecked" [ngModelOptions]="{standalone: true}">青铜峡坝下</label>
                  </p>
                  <nz-form-item nzFlex>
                    <nz-form-label>早8时</nz-form-label>
                    <nz-form-control>
                      <input formControlName="qtx_early_8" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item nzFlex>
                    <nz-form-label>昨日均</nz-form-label>
                    <nz-form-control>
                      <input formControlName="qtx_last_avg" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="sms-card-col">
                  <p>
                    <label nz-checkbox [(ngModel)]="szsChecked" [ngModelOptions]="{standalone: true}">石嘴山断面</label>
                  </p>
                  <nz-form-item nzFlex>
                    <nz-form-label>早8时</nz-form-label>
                    <nz-form-control>
                      <input formControlName="szs_early_8" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item nzFlex>
                    <nz-form-label>昨日均</nz-form-label>
                    <nz-form-control>
                      <input formControlName="szs_last_avg" nz-input readonly/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </form>
            </nz-card>
          </div>

          <div class="row-card-container">
            <nz-card style="width: 100%;" nzTitle="干渠引水（单位：m³/s）" [nzExtra]="btnGroupTemplate">
              <form nz-form [formGroup]="canalImportForm">
                <div class="single-row">
                  <div class="sms-card-col">
                    <nz-form-item nzFlex>
                      <nz-form-label>各干渠引水流量合计</nz-form-label>
                      <nz-form-control>
                        <input formControlName="total" readonly nz-input/>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
                <div class="single-row">
                  <div class="sms-card-col" *ngFor="let control of listOfCanalFormControl">
                    <nz-form-item nzFlex>
                      <nz-form-label
                        [nzFor]="control.controlInstance">{{control.label}}
                      </nz-form-label>
                      <nz-form-control>
                        <input [formControlName]="control.controlInstance" nz-input/>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </form>
            </nz-card>
            <ng-template #btnGroupTemplate>
              <button nz-button nzType="primary" (click)="confirm(1)">确认</button>
              <button nz-button nzType="default" (click)="reset(1)">取消</button>
            </ng-template>
          </div>

          <div class="row-card-container">
            <nz-card style="width: 100%;" nzTitle="灌溉进度（单位：万亩）" [nzExtra]="btnGroupTemplate2">
              <form nz-form [formGroup]="irrigateForm" class="single-row">
                <div class="sms-card-col">
                  <nz-form-item nzFlex>
                    <nz-form-label>应灌面积</nz-form-label>
                    <nz-form-control>
                      <input formControlName="planArea" nz-input/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="sms-card-col">
                  <nz-form-item nzFlex>
                    <nz-form-label>实灌面积</nz-form-label>
                    <nz-form-control>
                      <input formControlName="actArea" nz-input/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="sms-card-col">
                  <nz-form-item nzFlex>
                    <nz-form-label>比例(%)</nz-form-label>
                    <nz-form-control>
                      <input formControlName="areaPer" readonly nz-input/>
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </form>
            </nz-card>
            <ng-template #btnGroupTemplate2>
              <button nz-button nzType="primary" (click)="confirm(2)">确认</button>
              <button nz-button nzType="default" (click)="reset(2)">取消</button>
            </ng-template>
          </div>

          <div class="row-card-container">
            <nz-card style="width: 100%;" nzTitle="湖泊湿地生态（单位：万m³）" [nzExtra]="btnGroupTemplate3">
              <form nz-form [formGroup]="lakeForm">
                <div class="single-row">
                  <div class="sms-card-col">
                    <nz-form-item nzFlex>
                      <nz-form-label>累计补水量</nz-form-label>
                      <nz-form-control>
                        <input formControlName="total" readonly nz-input/>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="sms-card-col">
                    <nz-form-item nzFlex>
                      <nz-form-label>占计划占比(%)</nz-form-label>
                      <nz-form-control>
                        <input formControlName="percentage" readonly nz-input/>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
                <div class="single-row">
                  <div class="sms-card-col" *ngFor="let control of listOfLakeFormControl">
                    <nz-form-item nzFlex>
                      <nz-form-label
                        [nzFor]="control.controlInstance">{{control.label}}
                      </nz-form-label>
                      <nz-form-control>
                        <input [formControlName]="control.controlInstance" nz-input/>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </form>
            </nz-card>
            <ng-template #btnGroupTemplate3>
              <button nz-button nzType="primary" (click)="confirm(3)">确认</button>
              <button nz-button nzType="default" (click)="reset(3)">取消</button>
            </ng-template>
          </div>
        </div>
      </ng-template>
    </nz-tab>
    <nz-tab nzTitle="网页发布">
      <ng-template nz-tab>
        <div class="publish-main-container web-publish-container">
          <div class="row-card-container">
            <nz-card style="width: 100%;" nzTitle="宁夏水资源管理系统" [nzExtra]="btnGroupWebTemplate">
              <div class="content-card-box">
                <ng-container *ngFor="let title of webWrTitleKeys">
                  <nz-card [nzTitle]="title" class="web-sub-card">
                    <nz-table [nzData]="webWrTableData[title]"
                              nzBordered
                              [nzFrontPagination]="false"
                              nzSize="middle">
                      <thead>
                      <tr>
                        <th>渠道名称</th>
                        <th nzWidth="135px">实际引水量（m³）</th>
                        <th nzWidth="130px">日均流量（m³/s）</th>
                        <th nzWidth="45px">操作</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr *ngFor="let data of webWrTableData[title];" class="editable-row">
                        <td>
                          {{data.sideName}}
                        </td>
                        <td>
                          <ng-container *ngIf="!editWebWrCache[data.sideId].edit; else actMwoInputTpl">
                            {{data.actMwo}}
                          </ng-container>
                          <ng-template #actMwoInputTpl>
                            <input type="text" nz-input
                                   [(ngModel)]="editWebWrCache[data.sideId].data.actMwo"/>
                          </ng-template>
                        </td>
                        <td>
                          <ng-container
                            *ngIf="!editWebWrCache[data.sideId].edit; else dailyFlowInputTpl">
                            {{data.dailyFlow}}
                          </ng-container>
                          <ng-template #dailyFlowInputTpl>
                            <input type="text" nz-input
                                   [(ngModel)]="editWebWrCache[data.sideId].data.dailyFlow"/>
                          </ng-template>
                        </td>
                        <td>
                          <div class="editable-row-operations">
                            <ng-container *ngIf="!editWebWrCache[data.sideId].edit; else saveTpl">
                              <a (click)="startWebWrEdit(data.sideId)">
                                修改
                              </a>
                            </ng-container>
                            <ng-template #saveTpl>
                              <a (click)="saveWebWrEdit(data.sideId)">保存</a>
                                <a (click)="cancelWebWrEdit(data.sideId)">取消</a>

                                <!--<a nz-popconfirm nzTitle="确认取消?" (nzOnConfirm)="cancelWebWrEdit(data.sideId)">取消</a>-->
                            </ng-template>
                          </div>
                        </td>
                      </tr>
                      </tbody>
                    </nz-table>
                  </nz-card>
                </ng-container>
              </div>

            </nz-card>
            <ng-template #btnGroupWebTemplate>
              <div style="display: inline-block">
                日期：
                <nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>
              </div>
              <button nz-button nzType="primary" (click)="confirm(1)">确认</button>
              <button nz-button nzType="default" (click)="reset(1)">取消</button>
            </ng-template>
          </div>

          <div class="row-card-container">
            <nz-card style="width: 100%;" nzTitle="宁夏水利应用公共平台" [nzExtra]="btnGroupWebTemplate2">
              <div class="content-card-box">
                <nz-card nzTitle="黄河水情" class="col_2_card web-sub-card">
                  <div class="row-container">
                    <div class="half-box">
                      <form nz-form [formGroup]="yellowRiverWebForm">
                        <div>
                          <p>龙羊峡水库</p>
                          <nz-form-item nzFlex>
                            <nz-form-label>早8时入库</nz-form-label>
                            <nz-form-control>
                              <input formControlName="lyx_early_8" nz-input/>
                            </nz-form-control>
                          </nz-form-item>
                        </div>

                        <div>
                          <p>刘家峡水库</p>
                          <nz-form-item nzFlex>
                            <nz-form-label>早8时出库</nz-form-label>
                            <nz-form-control>
                              <input formControlName="ljx_early_8" nz-input/>
                            </nz-form-control>
                          </nz-form-item>
                        </div>

                        <div>
                          <p>下河沿断面</p>
                          <div nz-row>
                            <nz-form-item nz-col nzSpan="12" nzFlex>
                              <nz-form-label>早8时</nz-form-label>
                              <nz-form-control>
                                <input formControlName="xhydm_early_8" nz-input/>
                              </nz-form-control>
                            </nz-form-item>
                            <nz-form-item nz-col nzSpan="12" nzFlex>
                              <nz-form-label>昨日均</nz-form-label>
                              <nz-form-control>
                                <input formControlName="xhydm_last_avg" nz-input/>
                              </nz-form-control>
                            </nz-form-item>
                          </div>
                        </div>

                        <div>
                          <p>青铜峡坝下</p>
                          <div nz-row>
                            <nz-form-item nz-col nzSpan="12" nzFlex>
                              <nz-form-label>早8时</nz-form-label>
                              <nz-form-control>
                                <input formControlName="qtx_early_8" nz-input/>
                              </nz-form-control>
                            </nz-form-item>
                            <nz-form-item nz-col nzSpan="12" nzFlex>
                              <nz-form-label>昨日均</nz-form-label>
                              <nz-form-control>
                                <input formControlName="qtx_last_avg" nz-input/>
                              </nz-form-control>
                            </nz-form-item>
                          </div>

                        </div>

                        <div>
                          <p>石嘴山断面</p>
                          <div nz-row>
                            <nz-form-item nz-col nzSpan="12" nzFlex>
                              <nz-form-label>早8时</nz-form-label>
                              <nz-form-control>
                                <input formControlName="szs_early_8" nz-input/>
                              </nz-form-control>
                            </nz-form-item>
                            <nz-form-item nz-col nzSpan="12" nzFlex>
                              <nz-form-label>昨日均</nz-form-label>
                              <nz-form-control>
                                <input formControlName="szs_last_avg" nz-input/>
                              </nz-form-control>
                            </nz-form-item>
                          </div>
                        </div>
                      </form>
                    </div>
                    <div class="clearfix">
                      <nz-upload
                        class="file-upload"
                        [nzAction]="uploadUrl"
                        nzListType="picture-card"
                        [(nzFileList)]="fileList"
                        (nzChange)="handleChange($event)"
                        [nzShowButton]="fileList.length < 1"
                        [nzShowUploadList]="showUploadList"
                        [nzPreview]="handlePreview">
                        <i nz-icon nzType="plus"></i>
                        <div class="ant-upload-text">图片上传</div>
                      </nz-upload>
                      <nz-modal
                        [nzVisible]="previewVisible"
                        [nzContent]="modalContent"
                        [nzFooter]="null"
                        (nzOnCancel)="previewVisible = false">
                        <ng-template #modalContent>
                          <img [src]="previewImage" [ngStyle]="{ width: '100%' }"/>
                        </ng-template>
                      </nz-modal>
                    </div>
                  </div>
                </nz-card>
                <nz-card nzTitle="实时水量" class="col_1_card web-sub-card">
                  <div class="half-box">
                    <form nz-form [formGroup]="webIrrForm">
                      <div>
                        <nz-form-item nzFlex>
                          <nz-form-label>累计引水量（亿m³）</nz-form-label>
                          <nz-form-control>
                            <input nz-input formControlName="mwoTotal"/>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                    </form>

                  </div>

                </nz-card>
              </div>

            </nz-card>
            <ng-template #btnGroupWebTemplate2>
              <div style="display: inline-block">
                日期：
                <nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>
              </div>
              <button nz-button nzType="primary" (click)="confirm(3)">确认</button>
              <button nz-button nzType="default" (click)="reset(3)">取消</button>
            </ng-template>
          </div>

          <!--<div class="row-card-container">-->
            <!--<nz-card style="width: 100%;" nzTitle="水资源业务管理系统（黄河水利委员会）" [nzExtra]="btnGroupWebTemplate1">-->
              <!--<div class="content-card-box">-->
                <!--<ng-container *ngFor="let busData of webBusTableDatas;">-->
                  <!--<div class="sub-table-container">-->
                    <!--<nz-table [nzData]="busData"-->
                              <!--nzBordered-->
                              <!--[nzFrontPagination]="false"-->
                              <!--nzSize="middle">-->
                      <!--<thead>-->
                      <!--<tr>-->
                        <!--<th>取/退水口</th>-->
                        <!--<th nzWidth="80px">8时流量(m³/s)</th>-->
                        <!--<th nzWidth="130px">昨日平均流量（m³/s）</th>-->
                        <!--<th nzWidth="80px">昨日水量（万m³）</th>-->
                        <!--<th nzWidth="100px">水量参考值（万m³）</th>-->
                        <!--<th nzWidth="45px">操作</th>-->
                      <!--</tr>-->
                      <!--</thead>-->
                      <!--<tbody>-->
                      <!--<tr *ngFor="let data of busData;" class="editable-row">-->
                        <!--<td>-->
                          <!--{{data.sideName}}-->
                        <!--</td>-->
                        <!--<td>-->
                          <!--<ng-container *ngIf="!editWebBusCache[data.sideId].edit; else flowEightInputTpl">-->
                            <!--{{data.flowEight}}-->
                          <!--</ng-container>-->
                          <!--<ng-template #flowEightInputTpl>-->
                            <!--<input type="text" nz-input-->
                                   <!--[(ngModel)]="editWebBusCache[data.sideId].data.flowEight"/>-->
                          <!--</ng-template>-->
                        <!--</td>-->
                        <!--<td>-->
                          <!--<ng-container-->
                            <!--*ngIf="!editWebBusCache[data.sideId].edit; else flowAverInputTpl">-->
                            <!--{{data.flowAver}}-->
                          <!--</ng-container>-->
                          <!--<ng-template #flowAverInputTpl>-->
                            <!--<input type="text" nz-input-->
                                   <!--[(ngModel)]="editWebBusCache[data.sideId].data.flowAver"/>-->
                          <!--</ng-template>-->
                        <!--</td>-->
                        <!--<td>-->
                          <!--<ng-container *ngIf="!editWebBusCache[data.sideId].edit; else waterQuaInputTpl">-->
                            <!--{{data.waterQua}}-->
                          <!--</ng-container>-->
                          <!--<ng-template #waterQuaInputTpl>-->
                            <!--<input type="text" nz-input-->
                                   <!--[(ngModel)]="editWebBusCache[data.sideId].data.waterQua"/>-->
                          <!--</ng-template>-->
                        <!--</td>-->
                        <!--<td>-->
                          <!--<ng-container-->
                            <!--*ngIf="!editWebBusCache[data.sideId].edit; else waterDefInputTpl">-->
                            <!--{{data.waterDef}}-->
                          <!--</ng-container>-->
                          <!--<ng-template #waterDefInputTpl>-->
                            <!--<input type="text" nz-input-->
                                   <!--[(ngModel)]="editWebBusCache[data.sideId].data.waterDef"/>-->
                          <!--</ng-template>-->
                        <!--</td>-->
                        <!--<td>-->
                          <!--<div class="editable-row-operations">-->
                            <!--<ng-container *ngIf="!editWebBusCache[data.sideId].edit; else saveTpl">-->
                              <!--<a (click)="startWebBusEdit(data.sideId)">-->
                                <!--修改-->
                              <!--</a>-->
                            <!--</ng-container>-->
                            <!--<ng-template #saveTpl>-->
                              <!--<a (click)="saveWebBusEdit(data.sideId)">保存</a>-->
                              <!--<a nz-popconfirm nzTitle="确认取消?" (nzOnConfirm)="cancelWebBusEdit(data.sideId)">取消</a>-->
                            <!--</ng-template>-->
                          <!--</div>-->
                        <!--</td>-->
                      <!--</tr>-->
                      <!--</tbody>-->
                    <!--</nz-table>-->
                  <!--</div>-->
                <!--</ng-container>-->
              <!--</div>-->

            <!--</nz-card>-->
            <!--<ng-template #btnGroupWebTemplate1>-->
              <!--<div style="display: inline-block">-->
                <!--日期：-->
                <!--<nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>-->
              <!--</div>-->
              <!--<button nz-button nzType="primary" (click)="confirm(2)">确认</button>-->
              <!--<button nz-button nzType="default" (click)="reset(2)">取消</button>-->
            <!--</ng-template>-->
          <!--</div>-->
        </div>
      </ng-template>
    </nz-tab>
    <nz-tab nzTitle="水资源业务管理系统（黄委会）">
      <app-ywglxt></app-ywglxt>
    </nz-tab>
  </nz-tabset>
  <ng-template #extraTemplate>
    <button nz-button nzType="link" (click)="preview()" *ngIf="publishType === 0">
      <i nz-icon nzType="mail" nzTheme="outline"></i>短信预览
    </button>
  </ng-template>
</div>
<nz-modal nzClassName="custom-modal" nzWidth="950" [(nzVisible)]="modalShow" nzTitle="短信发布"
          (nzOnCancel)="onCancel()">
  <div [innerHTML]="smsTpl" #smsHTML>
  </div>

  <div *nzModalFooter>
    <button nz-button nzType="primary" (click)="smsPublish()" [nzLoading]="isPublishLoading">确认发送</button>
    <button nz-button nzType="default" (click)="onCancel()">取消</button>
  </div>
</nz-modal>
